/**
 * 分页控件
 * @param  {number} all         defaultValue = 50    [数据总条数]
 * @param  {number} pageConten  defaultValue = 10    [每页数据的条数]
 * @param  {number} pageSize    defaultValue = 05    [分页控件翻页的个数]
 * @param  {number} page        defaultValue = 01    [当前页]
 * @param  {function} pageBarClick                   [切换页事件]
 */
class pagesBar extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      all: props.all || 50,
      pageConten: props.pageConten || 10,
      pageSize: props.pageSize || 5,
      page: props.page || 0,
      pages: '',
      begin: ''
    };

    console.log('获得初始参数', this.state);
    console.log('当前页', this.state.page);
    this.pageClick = this.pageClick.bind(this);
  }

  componentWillMount() {
    this.count()
  }


  // 如果传入的总条数或则但前页数变了，重绘组件
  componentWillReceiveProps(nextProps, nextContext) {
    if ( nextProps.all != this.state.all || nextProps.page != this.state.page ) {
      console.log("数据变化");
      this.state.all = nextProps.all;
      this.state.page = nextProps.page;
      this.count();
    }
  }

  count() {
    // 计入总页数
    this.state.pages = this.state.all % this.state.pageConten === 0 ? this.state.all / this.state.pageConten : Math.floor(this.state.all / this.state.pageConten) + 1;
    console.log('总页面', this.state.pages);
    // 计入开始页
    this.state.begin = (Math.floor(this.state.page / this.state.pageSize) + (this.state.page % this.state.pageSize === 0 ? -1 : 0))  * this.state.pageSize + 1;
    console.log('开始页', this.state.begin);
    this.setState({
      html: this.draw()
    })
  }

  // 点击事件绑定
  pageClick(E) {
    if (E.target.nodeName === 'A') {
      switch (E.target.name) {
        case 'previous':
          if (this.state.begin > 5) {
            console.log('可以上翻');
            this.state.begin = this.state.begin - 5;
            this.setState({ html: this.draw() });
          } else {
            console.log('不可以上翻');
            this.state.begin = 1;
          }
          break;
        case 'next':
          if (this.state.pages - this.state.begin >= 5) {
            console.log('可一下翻');
            this.state.begin = this.state.begin + 5;
            this.setState({ html: this.draw() });
          } else {
            console.log('不可以下翻');
            this.state.begin = this.state.begin;
          }
          break;
        default:
          this.state.page = +E.target.innerHTML;
          console.log('激活页码', this.state.page);
          this.setState({ html: this.draw() });
          this.props.pageBarClick && typeof this.props.pageBarClick === 'function' && this.props.pageBarClick(this.state.page);
      }
    }
  }

  draw() {
    let arr = [];
    arr.push(`<li><a name="previous">&laquo;</a></li>`)
    for(let i = this.state.begin, len = this.state.pages - this.state.begin >= 5 ? this.state.begin + this.state.pageSize : this.state.pages + 1 ; i < len; i += 1) {
      arr.push(`<li class="${i === this.state.page && 'active'}"><a>${i}</a></li>`)
    }
    arr.push(`<li><a name="next">&raquo;</a></li>`)
    return arr.join('');
  }

  render() {
    return (
      <nav className="text-right">
        <ul className="pagination" dangerouslySetInnerHTML={{__html: this.state.html}} onClick={this.pageClick}>
        </ul>
      </nav>
    )
  }
}

module.exports = pagesBar;
